<template>
  <div>
    <el-form :model="{}" size="medium" :inline="true" label-width="60px">
      <el-form-item label="操作栏" prop="">
        <el-button type="primary" plain icon="el-icon-plus" size="medium" @click="handleAdd">新增任务
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 表格区域 -->
    <el-table v-loading="loading" :data="noticeList">
      <el-table-column label="序号" align="center" prop="order" width="50" />
      <el-table-column label="任务编号" align="center" prop="noticeType" min-width="150">
        <template slot-scope="scope">
          <el-link @click="handledetailed(scope.row)" type="primary">{{ scope.row.taskNum || '-' }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="盘点范围" align="center" min-width="150">
        <template slot-scope="scope">
          {{ scope.row.stktakingDeptName || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="任务责任部门" align="center" min-width="130">
        <template slot-scope="scope">
          {{ scope.row.deptName || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="任务责任人" align="center" min-width="220">
        <template slot-scope="scope">
          {{ scope.row.headName || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="盘点方式" align="center" min-width="120">
        <template slot-scope="scope">
          {{ ['全盘盘点', '比例盘点'][scope.row.type] || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="盘点比例" align="center" min-width="120">
        <template slot-scope="scope">
          {{ scope.row.type === '0' ? '-' : scope.row.proportion * 100 + '%' || '0%' }}
        </template>
      </el-table-column>
      <el-table-column label="盘点对象生成方式" align="center" min-width="120">
        <template slot-scope="scope">
          {{ ['随机生成', '手动生成'][scope.row.generationType] || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button size="small" type="primary" icon="el-icon-edit" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <div align="center" style="{'margin-top':'10px'}">
      <el-button @click="handlequit">修改计划</el-button>
      <el-button type="primary" @click="submitForm">提交任务</el-button>
    </div>
    <template v-if="open">
      <CreatedTask :planId="planId" :title="title" :rowObj="rowObj"></CreatedTask>
    </template>
  </div>
</template>

<script>
import { getChlidrenStktaking, deleteTaskList, postCreatedTask } from "@/api/Inventory/Inventory.js";
export default {
  props: ['planId'],
  components: {
    CreatedTask: () => import('./form/createdtask.vue')
  },
  data () {
    return {
      noticeList: [],
      open: false,
      rowObj: {},
      title: '',
      loading: false,
    }
  },
  created () {
    this.getList()
  },
  methods: {
    async getList () {
      this.loading = true
      let data = await getChlidrenStktaking(this.planId);
      this.noticeList = data.data.stktakingTaskVoList.map((item, index) => {
        return {
          ...item,
          order: index + 1
        }
      })
      this.loading = false
    },
    /**
     * 新增任务
     */
    handleAdd () {
      this.open = true
      this.title = '新增任务'
    },
    /**
    * 修改任务
    */
    handleUpdate (row) {
      this.title = '修改任务'
      this.open = true
      console.log(row);
      this.rowObj = row
    },
    /**
     * 返回上一步
     */
    handlequit () {
      this.$emit('handlequit', this.planId)
    },
    /**
     * 提交
     */
    submitForm () {
      this.$message.success('操作成功')
      this.$emit('handleSubmit')
    },
    /**
     * 详情
     */
    handledetailed (row) {
      this.$emit('handlereplace', row)
    },
    handleDelete (row) {
      this.$confirm(`是否确认删除该数据`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true;
        let params = {
          planId: row.planId,
          taskId: row.taskId
        }
        deleteTaskList(params).then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg)
            this.getList()
          }
          this.loading = false;
        }).catch(() => { this.loading = false; });
      })
    }
  }

}
</script>

<style>
</style>